<style lang="less" scoped>
    .confirm_cont {
        margin: 1.28rem .3rem 0;
        background-color: #fff;
        border-radius: .1rem;
        box-shadow: 0 0 .2rem #ccc;
        padding: .4rem .7rem .65rem;
        .shop_info {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .logo {
                width: 1.56rem;
                height: 1.56rem;
                border-radius: 50%;
            }
            .name {
                font-size: .34rem;
                color: #222;
                font-weight: bold;
                margin-top: .28rem;
            }
        }
        .count_cover {
            padding-top: .8rem;
            .label {
                font-size: .3rem;
                color: #060606;
            }
            .edit_box {
                position: relative;
                border-bottom: .02rem solid #dedede;
                .icon_pay {
                    font-size: .62rem;
                    color: #060606;
                    position: absolute;
                    top: .55rem;
                }
                .edit_ipt {
                    width: 100%;
                    height: 1.8rem;
                    font-size: 1.2rem;
                    color: #060606;
                    padding-left: .6rem;
                }
            }
            .balance {
                display: block;
                font-size: .28rem;
                color: #a8a8a8;
                margin-top: .2rem;
            }
        }
        .btn_pay {
            width: 100%;
            height: 0.8rem;
            font-size: .38rem;
            color: #fff;
            margin-top: .45rem;
            position: static;
        }
    }
</style>

<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="confirm_pay_box main_allScroll">
            <div class="confirm_cont">
                <div class="shop_info">
                    <!--<img class="logo" v-lazy="{src:merchant.headImgUrl}" alt="shop logo">-->
                    <span class="name">提到余额</span>
                </div>

                <div class="count_cover">
                    <span class="label">输入可提金额</span>
                    <div class="edit_box">
                        <span class="icon_pay">￥</span>
                        <input class="edit_ipt" type="number" v-model="amount">
                    </div>
                    <span class="balance">当前可提到余额金额￥{{totalMibi || 0}}</span>
                </div>

                <button class="btns buttonBR btn_pay":class="amount && amount > 0 && Number(amount) <= Number(totalMibi)  ? '' : 'disabled'" :disabled="!(amount && amount > 0 && Number(amount) <= Number(totalMibi))" @click="pay" >提现</button>
            </div>
            <!--TODO templated amount show       changeShow  sucCallback-->
            <v-pay :amount="amount" :show="payShow" @changeShow="changeShow" @pay="conPw"></v-pay>
        </div>
    </div>
</template>
<script>
    import {mapState} from 'vuex'
    export default {
        data() {
            return {
                merchant: {},
                payShow: false,
                totalMibi: '',
                amount: '',
                receivablesUserName:''
            }
        },
        activated: function(){
            this.init();

        },
        methods: {
            init(){
                this.payShow= false;
                this.totalMibi='';
                this.merchant={}
                this.amount='';
                this.receivablesUserName = ''
                this.getBaobei()
            },
            getBaobei() {
                this.$ajax.finance.getVirtualcoinInfo()
                    .then(res => {
                        this.totalMibi = res.body.content.profit && res.body.content.profit != null? res.body.content.profit:0;
                    })
            },
            //  提现
            pay() {
                let that = this;
               if(Number(this.amount) > Number(this.totalMibi) ){
                    this.$vux.toast.show({
                        type: 'text',
                        text: '可提金额不足'
                    })
                } else {
                    this.changeShow(true)
                }
            },
            changeShow(boolean){
                this.payShow = boolean
            },
            //  填写支付密码后成功回掉
            conPw(res) {
                this.changeShow(false);
                this.virtualcoinProfitTransferBalance(res);
            },
            //调用提现接口
            virtualcoinProfitTransferBalance(str){
                this.$ajax.finance.virtualcoinProfitTransferBalance({
                    password: str,  //            String类型，支付密码
                    amount: this.amount,  //BigDecimal类型，转账金额
                })
                    .then((res)=>{
                        this.$router.replace({path:'/success',query:{
                                type:0,
                                title:'提现成功',
                                text:'提现成功'
                            }})
                    })
            }
        },
        watch:{
            amount:function () {
                /*if(String(this.amount).indexOf('.')>=0){
                    this.amount = parseInt(this.amount)
                }*/
            }  
        },
        computed: mapState({config:state=>state.config})
    }
</script>

